<template>
	<el-dialog align-center draggable v-model="dialogFormVisible" :title="title" width="600px" destroy-on-close>
		<div class="dialog-content">
			<el-form :model="form" label-width="auto" style="max-width: 600px" :rules="rules">
				<el-form-item label="账号" prop="account" >
				    <el-input v-model="form.account" disabled/>
				</el-form-item>
				<el-form-item label="姓名" prop="name">
				    <el-input v-model="form.name" />
				</el-form-item>
				<el-form-item label="性别" prop="password">
				    <el-select v-model="form.sex" placeholder="请选择性别">
						<el-option label="男" value="男" />
						<el-option label="女" value="女" />
					  </el-select>
				</el-form-item>
				<el-form-item label="邮箱" prop="email">
				    <el-input v-model="form.email" />
				</el-form-item>
				<el-form-item label="部门" prop="department">
				    <el-select v-model="form.department" placeholder="请选择部门">
						<el-option label="总裁办" value="总裁办" />
						<el-option label="项目部" value="项目部" />
					  </el-select>
				</el-form-item>
			</el-form>
		</div>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取消</el-button>
				<el-button type="primary" @click="yes">
					确认
				</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
	import {
		onBeforeUnmount, 
		ref, 
		shallowRef,
		reactive
	} from 'vue'
	const dialogFormVisible = ref(false);
	import {bus} from "@/utils/mitt.js"
	import { editAdmin } from "@/api/userInfo.js"
	import { ElMessage } from "element-plus";
	let form = reactive({
		id: "",
		account: "",
		name: "",
		sex: "",
		email: "",
		department: ""
	})
	const edit = defineEmits(["success"])
	const title = ref("编辑管理员信息")
	const yes = async() =>{
		const res = await editAdmin(form)
		if (res.data.code === 0) {
			ElMessage({
			    message: res.data.msg,
			    type: "success"
			})
			dialogFormVisible.value = false
		} else {
			ElMessage.error(res.data.msg);
		}
		edit("success")
	}
	
	const open = () =>{
		dialogFormVisible.value = true
	}
	
	defineExpose({
		open
	})
	const rules = reactive({
		id: [
			{required: true, message: "请输入管理员的id", trigger: "blur"}
		],
		account: [
			{required: true, message: "请输入管理员的注册账号", trigger: "blur"}
		],
		name: [
			{required: true, message: "请输入管理员的注册姓名", trigger: "blur"}
		],
		sex: [
			{required: true, message: "请选择管理员的注册性别", trigger: "blur"}
		],
		email: [
			{required: true, message: "请选择管理员的注册邮箱", trigger: "blur"}
		],
		department: [
			{required: true, message: "请选择管理员的注册部门", trigger: "blur"}
		]
	})
	bus.on("editorData", (row) => {
		form = reactive(row)
	})
</script>

<style lang="scss" scoped>
	.dialog-content {
		display: flex;
		padding: 20px 30px;
		:deep(.el-form-item) {
			margin: 30px;
		}
	}
</style>